<template>
<view class="page">
	<image src="@/static/code.png" class="content">
	</image>
	<view class="contenta">
		<view class="head">
			<view class="left">
				<image src="@/static/nh.png" alt="" class="img" />
				<p class="title">欢迎使用同兴医废医疗机构端</p>
			</view>
			<view class="right">
				<image alt="" class="img1" src="@/static/wt.png" />
			</view>
		</view>
		<view class="card">
			<u-form :model="form" ref="uForm" :rules='rules'>
				<u-form-item style="margin-top: 20rpx;" prop="mobile">
					<view
						style="display: flex;align-items: center;background: #fbfbfb;height: 110rpx;width:100%">
						<u-input v-model="form.mobile" clearable placeholder="请输入手机号"/>
					</view>
				</u-form-item>
				<u-form-item class="item1" style="margin-top: 30rpx;">

					<view
						style="display: flex;align-items: center;background: #fbfbfb;height: 110rpx;width: 100%">
						<u-input v-model="form.verCode" clearable placeholder="请输入验证码"/>
						<view>
							<u-toast></u-toast>
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
								@change="codeChange"></u-code>
							<view @tap="getCode" class="getcode"
								style="text-align: right;width: 250rpx;border:none  !important;">
								{{tips}}
							</view>
						</view>
					</view>

				</u-form-item>
				<p class="size">没有账号？<span style="color: #3db020;" @click="signin">注册账号</span></p>
				<view class="square" :class="next?'nextActive':''" @click="loginCode">登录</view>
			</u-form>
		</view>
	</view>
	<view class="yhxy">
		<u-radio-group v-model="value">
			<u-radio activeColor='#3db020' shape="circle" label='true' name="true">我已阅读并同意 <span
					@click="user">《用户协议》</span> 和 <span @click="privacy">《隐私政策》</span></u-radio>
		</u-radio-group>
	</view>

</view>
</template>

<script>
import {
	login,
	detail,
	getFileAuthPath,
	sendCode
} from '../../utils/api.js'
export default {
	data() {
		return {

			value: false,
			form: {
				// verCode: '123456',
				// mobile: '18328375982',
				verCode: '',
				mobile: '',
				wxCode: ''
			},
			tips: '',
			rules: {
				'mobile': [{
						required: true,
						message: '请输入电话',
						trigger: 'blur'
					},
					{
						validator: this.checkPhoneNum,
						trigger: 'blur'
					},
				],
				'verCode': [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					},

				],

			},
			seconds: 60,
			next: true
		}
	},
	watch: {
		form: {
			deep: true,
			handler(newValue) {
				console.log("newValue", newValue)
				let arr = []
				let notArr = [null, undefined, '']
				Object.keys(newValue).map(el => {
					if (!notArr.includes(newValue[el])) {
						arr.push(el)
					}
					if (arr.length == 2) {
						this.next = true
					} else {
						this.next = false;
					}
				})
			}

		},
	},
	methods: {
		checkPhoneNum(rule, value, callback) {
			var reg = /^1[3456789]\d{9}$/;
			if (reg.test(value)) {
				callback();
			} else {
				callback(new Error('手机号码格式不正确'));
			}
		},
		loginCode() {
			if (this.value == false) {
				uni.$u.toast('请先勾选用户协议!')
				return
			}
			uni.login({
				provider: 'weixin', //使用微信登录
				success: (res) => {
					console.log('登录：', res)
					if(res.errMsg == 'login:ok'){
						this.form.wxCode = res.code
						login(this.form).then(res => {
							if (res.data.token) {
								uni.setStorageSync('Token', res.data.token)
								// uni.setStorageSync('ID',res.data.id)
								uni.setStorageSync('loginUser', JSON.stringify(res.data.loginUser))
								detail().then(val => {
									let detail = JSON.stringify(val.data)
									uni.setStorageSync('detail', detail)
									if(val.data.signature){
										getFileAuthPath({
											fileIds: val.data.signature
										}).then(res=>{
											// console.log('签章地址:', res)
											let qzdz = res.data[0].path
											uni.setStorageSync('qzdz', qzdz)
										})
									}
								}).catch(err => {
									uni.$u.toast('医疗机构信息获取失败！')
								})
								uni.showToast({
									title: '登录成功',
									duration: 1500,
									icon: 'success'
								})
								setTimeout(()=>{
									uni.switchTab({
										url: '/pages/index/index',
									});
								}, 1500)
							} else {
								uni.$u.toast('未获取到登录信息请重新登录！')
							}
						}).catch(err => {
							console.log("0000", err)
						})
					}
				}
			})
		},

		privacy() {
			uni.navigateTo({
				url: '/pages/yscl/yscl'
			})
		},
		user() {
			uni.navigateTo({
				url: '/pages/yhxy/yhxy'
			})
		},


		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			let data = ['', null, undefined]
			if (data.includes(this.form.mobile)) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none',
					duration: 1000
				})
				return
			}
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码!'
				})
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送!');
			}
		},
		end() {
			uni.$u.toast('倒计时结束');
		},
		start() {
			sendCode({
				phone: this.form.mobile
			}).then(res => {
				console.log("获取验证码成功", res)
			}).catch(err => {
				console.log('err:', err)
				uni.$u.toast('倒计时结束后再发送');
			})
		},
		signin() {
			uni.navigateTo({
				url: '/pages/Signin/Signin'
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.page {
	height: 100%;

}

.content {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	box-sizing: border-box;

}

.contenta {
	position: absolute;
	top: 0rpx;
	width: 100%;
}

.getcode {
	font-size: 30rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: Regular;
	position: relative;
	color: #3db020;
	background: #fbfbfb;
	position: relative;
	padding: 21rpx 20rpx;
	position: relative;
	top: 0rpx;
	border-radius: 0 8rpx 8rpx 0;

}

.head {
	width: 670rpx;
	height: 232rpx;
	margin: 230rpx auto 0;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.title {
		font-size: 34rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: Regular;
		text-align: left;
		color: #3f4151;
		line-height: 48rpx;
		margin-top: 16rpx;
	}

	.img {
		width: 168rpx;
		height: 64rpx;
	}

	.img1 {
		width: 144rpx;
		height: 144rpx;
	}
}

.card {
	width: 670rpx;
	background: #FFF;
	border-radius: 20rpx;
	margin: auto;
	margin-top: 60rpx;
	box-sizing: border-box;
	padding: 20rpx 30rpx;
}

.square {
	width: 610rpx;
	height: 110rpx;
	background: #3db020;
	opacity: 0.5;
	border-radius: 20rpx;
	text-align: center;
	line-height: 110rpx;
	font-size: 30rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: Regular;
	text-align: center;
	color: #ffffff;
	margin-bottom: 40rpx;
}

.nextActive {
	opacity: 1;
}

/deep/ .u-input[data-v-113bc24f] {

	background: #fbfbfb;

}

/deep/.u-form-item__body[data-v-067e4733] {
	padding: 0;
}

/deep/ .u-form-item__body__right__message {
	margin-left: 0rpx !important;
}

/deep/ .item1 .u-input--radius {
	border-radius: 8rpx 0 0 8rpx;
}

/deep/ .u-button--info {
	border: none;
}

/deep/ uni-button:after {
	border: none !important;
}

/deep/ .u-radio-group--row {
	justify-content: center;
	margin: auto !important;
}

.size {
	font-size: 26rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: Regular;
	text-align: right;
	color: #999999;
	margin-top: 30rpx;
	margin-bottom: 60rpx;
}

.yhxy {
	width: 100% !important;
	text-align: center !important;
	text-align: center !important;
	position: absolute !important;
	bottom: 80rpx;
	font-size: 26rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: Regular;
	text-align: left;
	color: #666666;

	span {
		color: #3DB020;
	}
}

</style>